<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const mechaDetail = ref('')
const mechaSkill = ref('')
const value1 = ref(false)
// 视频
import videojs from "video.js"
import "video.js/dist/video-js.css"
const videoPlayer = ref(null)
const myPlayer = ref(null)
onMounted(() => {
    mechaDetailList()
})
onUnmounted(() => {
    if (myPlayer.value) {
        myPlayer.value.dispose()
    }
})


//获取机甲详细数据
import { mechaDetailListService, mechaSkillListService } from '@/api/mecha.js'
const mechaDetailList = async () => {
    let params = {
        mechaId: route.params.mechaId
    }
    let result = await mechaDetailListService(params);
    mechaDetail.value = result.data
    mechaDetail.value.introduce = mechaDetail.value.introduce.replace(/\n/g, '<br>')

    // 初始化视频播放器
    if (myPlayer.value) {
        myPlayer.value.src({ type: 'video/mp4', src: mechaDetail.value.video })
    } else {
        myPlayer.value = videojs(videoPlayer.value, {
            controls: true,
            sources: [
                {
                    src: mechaDetail.value.video,
                    type: 'video/mp4',
                }
            ],
            controlBar: {
                remainingTimeDisplay: {
                    displayNegative: false
                }
            },
            playbackRates: [0.5, 1, 1.5, 2]
        })
    }

}
mechaDetailList()

//获取机甲技能
const mechaSkilllList = async () => {
    let params = {
        id: route.params.mechaId
    }
    let result = await mechaSkillListService(params);
    console.log(params);
    mechaSkill.value = result.data
    mechaSkill.value.mainIntro = mechaSkill.value.mainIntro.replace(/\n/g, '<br>')
    mechaSkill.value.secIntro = mechaSkill.value.secIntro.replace(/\n/g, '<br>')
    mechaSkill.value.jumpIntro = mechaSkill.value.jumpIntro.replace(/\n/g, '<br>')
    mechaSkill.value.moveIntro = mechaSkill.value.moveIntro.replace(/\n/g, '<br>')
    mechaSkill.value.coreIntro = mechaSkill.value.coreIntro.replace(/\n/g, '<br>')
}
mechaSkilllList()

import { ElDialog } from 'element-plus'
const visible1 = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
const visible4 = ref(false)
const visible5 = ref(false)

</script>

<template>
    <div class="box">
        <!-- 图片+故事 -->
        <div class="container">
            <!-- 机甲卡片 -->
            <div class="card">
                <el-card style="max-width: 280px;background: url(@/assets/bg.jpg) no-repeat 0 0 / cover;border: 0px;"
                    class="card">
                    <!-- <template #header style="color: #fff;">{{ mechaDetail.mechaName }}</template> -->
                    <div style="color: #fff;font-weight: 800;font-size: 20px;">{{ mechaDetail.mechaName }}</div>
                    <img :src="mechaDetail.path" style="width: 290%; margin-left: -150px;" />
                </el-card>
                <!-- <img :src="mechaDetail.path"/> -->
            </div>
            <!-- 背景故事 -->
            <div class="introduce border">
                <!-- <el-collapse style="position: relative; top: -20px; left: -40px;">
                    <div style="color: #fff;font-weight: 800;">背景故事</div>
                    <el-collapse-item>
                        <div style="font-size: 20px;padding: 20px;" v-html="mechaDetail.introduce"></div>
                    </el-collapse-item>
                </el-collapse> -->
                <div style=" position: relative;top: -20px;left: -102px;">
                    <div style="color: #fff;font-weight: 800;">背景故事<el-switch v-model="value1"
                            style="margin-left: 15px;" /></div>
                </div>
                <div v-show="value1" style="font-size: 20px;color: #fff;margin-right: 65px;margin-bottom: 15px;"
                    v-html="mechaDetail.introduce"></div>
            </div>
        </div>
        <!-- 基础数据 -->
        <div class="data border">
            <div class="inner">
                <div style="color: #fff;font-weight: 800;margin-bottom: 20px;">基础数据</div>
                <el-text style="color: #fff;margin-left: 100px;">耐久</el-text>
                <el-progress :percentage="mechaDetail.blood / 35" :stroke-width="20" color="red" :text-inside="true" style="margin-left: 100px;">
                    <el-text style="color: #fff;">{{ mechaDetail.blood }}</el-text>
                </el-progress>
                <el-text style="color: #fff;margin-left: 100px;">护盾</el-text>
                <el-progress :percentage="mechaDetail.shield / 10" :stroke-width="20" :text-inside="true" style="margin-left: 100px;">
                    <el-text style="color: #fff;">{{ mechaDetail.shield }}</el-text>
                </el-progress>
                <el-text style="color: #fff;margin-left: 100px;">燃料</el-text>
                <el-progress :percentage="mechaDetail.fuel / 1.5" :stroke-width="20" color="green" :text-inside="true" style="margin-left: 100px;">
                    <el-text style="color: #fff;">{{ mechaDetail.fuel }}</el-text>
                </el-progress>
            </div>
        </div>
        <!-- 技能 -->
        <div class="skill border">
            <div class="inner">
                <div style="color: #fff;font-weight: 800;margin-bottom: 20px;">技能</div>
                <!-- 主武器 -->
                <div class="demo-image" style="margin-left: 100px;">
                    <div class="block">
                        <el-image style="width: 110px; height: 100px" :src="mechaSkill.mainWeapon"
                            @click="visible1 = true" />
                    </div>
                </div>
                <!-- <el-dialog v-model="visible1" :show-close="false" width="500">
                    <template #header="{ titleClass }">
                        <div class="my-header">
                            <div :class="titleClass" v-html="mechaSkill.mainIntro"></div>
                        </div>
                    </template>
                </el-dialog> -->
                <el-dialog v-model="visible1" width="800">
                    <div v-html="mechaSkill.mainIntro" class="my-dialog"></div>
                </el-dialog>
                <!-- 副武器 -->
                <div class="demo-image">
                    <div class="block">
                        <el-image style="width: 110px; height: 100px" :src="mechaSkill.secWeapon"
                            @click="visible2 = true" />
                    </div>
                </div>
                <!-- <el-dialog v-model="visible2" :show-close="false" width="500">
                    <template #header="{ titleClass }">
                        <div class="my-header">
                            <div :class="titleClass" v-html="mechaSkill.secIntro"></div>
                        </div>
                    </template>
                </el-dialog> -->
                <el-dialog v-model="visible2" width="800">
                    <div v-html="mechaSkill.secIntro" class="my-dialog"></div>
                </el-dialog>
                <!-- 跳跃能力 -->
                <div class="demo-image">
                    <div class="block">
                        <el-image style="width: 110px; height: 100px" :src="mechaSkill.jumpSkill"
                            @click="visible3 = true" />
                    </div>
                </div>
                <!-- <el-dialog v-model="visible3" :show-close="false" width="500">
                    <template #header="{ titleClass }">
                        <div class="my-header">
                            <div :class="titleClass" v-html="mechaSkill.jumpIntro"></div>
                        </div>
                    </template>
                </el-dialog> -->
                <el-dialog v-model="visible3" width="800">
                    <div v-html="mechaSkill.jumpIntro" class="my-dialog"></div>
                </el-dialog>
                <!-- 战术能力 -->
                <div class="demo-image">
                    <div class="block">
                        <el-image style="width: 110px; height: 100px" :src="mechaSkill.moveSkill"
                            @click="visible4 = true" />
                    </div>
                </div>
                <!-- <el-dialog v-model="visible4" :show-close="false" width="500">
                    <template #header="{ titleClass }">
                        <div class="my-header">
                            <div :class="titleClass" v-html="mechaSkill.moveIntro"></div>
                        </div>
                    </template>
                </el-dialog> -->
                <el-dialog v-model="visible4" width="800">
                    <div v-html="mechaSkill.moveIntro" class="my-dialog"></div>
                </el-dialog>
                <!-- 核心能力 -->
                <div class="demo-image" v-show="mechaSkill.coreSkill">
                    <div class="block">
                        <el-image style="width: 110px; height: 100px" :src="mechaSkill.coreSkill"
                            @click="visible5 = true" />
                    </div>
                </div>
                <!-- <el-dialog v-model="visible5" :show-close="false" width="500">
                    <template #header="{ titleClass }">
                        <div class="my-header">
                            <div :class="titleClass" v-html="mechaSkill.coreIntro"></div>
                        </div>
                    </template>
                </el-dialog> -->
                <el-dialog v-model="visible5" width="800">
                    <div v-html="mechaSkill.coreIntro" class="my-dialog"></div>
                </el-dialog>
            </div>
        </div>
        <!-- 视频 -->
        <div class="video border">
            <div class="inner">
                <div style="color: #fff;font-weight: 800;margin-bottom: 20px;">演示视频</div>
                <div style="display: flex;justify-content: center;">
                    <video ref="videoPlayer" class="video-js" style="margin: auto auto;"
                        v-show="mechaDetail.blood ? mechaDetail.blood : true"></video>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.box {
    background: url(@/assets/bg.jpg) no-repeat 0 0 / cover;
    /* background-size: cover; */
}

.border {
    margin-top: 20px;
    border: 15px solid transparent;
    border-width: 51px 38px 20px 132px;
    border-image-source: url(@/assets/border.png);
    border-image-slice: 51 38 20 132;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .introduce {
        margin-left: 100px;
        width: 700px;
    }

}


// 基础数据
.data {

    .inner {
        position: relative;
        top: -20px;
        left: -102px;
        // background-color: red;
    }

    .el-progress--line {
        margin-bottom: 15px;
        max-width: 600px;
    }

}

// 技能
.skill {

    .inner {
        position: relative;
        top: -20px;
        left: -102px;
        // background-color: red;
        display: flex;
        flex-direction: row;
    }

    .demo-image .block {
        padding: 50px 0;
        margin-right: 65px;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        //   display: inline-block;
        width: 20%;
        box-sizing: border-box;
        vertical-align: top;
    }

    .demo-image .block:last-child {
        border-right: none;
    }

    .my-dialog {
        background-color: #f9f9f9;
        /* 背景颜色 */
        padding: 20px;
        /* 内边距 */
        border-radius: 10px;
        /* 圆角 */
        border: 1px solid #ddd;
        /* 边框 */
        font-size: 16px;
        /* 字体大小 */
        line-height: 1.8;
        /* 行高 */
        font-family: "Arial", sans-serif;
        /* 字体 */
        color: #333;
        /* 文字颜色 */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        /* 阴影效果 */
        max-width: 600px;
        /* 最大宽度 */
        margin: 20px auto;
        /* 居中显示 */
    }

}

// 视频
.video {
    .inner {
        position: relative;
        top: -20px;
        left: -102px;
        // background-color: red;
    }
}
</style>
